<template>
  <div class="permission">
    <div class="dialog">
      <el-dialog
        :title="dialog.title"
        :visible.sync="dialog.visible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
      >
        <el-form
          class="form"
          :model="permission"
          :rules="rules"
          label-position="right"
          label-width="100px"
          ref="form"
        >
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="permission.name" />
          </el-form-item>
          <el-form-item label="权限描述" prop="description">
            <el-input v-model="permission.description" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelClick">取 消</el-button>
          <el-button type="primary" @click="confirmClick">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="header">
      <el-button type="primary" size="mini" @click="getDatas(pageNo, pageSize)"
        >查询</el-button
      >
      <el-button type="primary" size="mini" @click="addData">添加</el-button>
    </div>
    <div class="content">
      <el-card>
        <el-table
          style="width: 100%"
          row-key="id"
          border
          :data="datas"
          :header-cell-style="{ 'background-color': '#EEEEEE' }"
        >
          <el-table-column prop="name" label="权限名称"></el-table-column>
          <el-table-column
            prop="description"
            label="权限描述"
          ></el-table-column>
          <el-table-column prop="statusID" label="状态">
            <template slot-scope="scope">
              {{ statuses[scope.row.statusID].label }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="showDialog(scope.row)" type="text" size="small"
                >修改</el-button
              >
              <el-button @click="onDelete(scope.row)" type="text" size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            :total="total"
            :current-page.sync="pageNo"
            :page-sizes="[10, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next"
          ></el-pagination>
        </div>
      </el-card>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
import {
  getPermissions,
  addPermission,
  updatePermission,
  deletePermission,
} from "@/api/permission";

export default {
  name: "permission",
  data() {
    return {
      dialog: {
        title: "",
        visible: false,
        update: false,
      },
      statuses: [
        { key: 0, label: "停用" },
        { key: 1, label: "活动" },
        { key: 2, label: "草稿" },
        { key: 3, label: "审批中" },
        { key: 5, label: "由活动状态停用" },
        { key: 6, label: "由草稿状态停用" },
        { key: 7, label: "由审批状态停用" },
      ],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      datas: [],
      permission: {
        id: null,
        name: "",
        description: "",
        statusID: 1,
      },
      rules: null,
    };
  },
  created() {
    const vm = this;
    vm.$nextTick(() => {
      vm.getDatas(vm.pageNo, vm.pageSize);
    });
  },
  destroyed() {},
  methods: {
    getDatas(pageNo, pageSize) {
      const vm = this;
      getPermissions({ page: pageNo, size: pageSize })
        .then((res) => {
          vm.datas = res.data;
          vm.total = res.data.length;
          Promise.resolve();
        })
        .catch((err) => {
          Promise.reject(err);
        });
    },
    addData() {
      const vm = this;
      vm.dialog.title = "添加权限";
      vm.dialog.visible = true;
      vm.dialog.update = false;
      vm.permission = {
        id: null,
        name: "",
        description: "",
        statusID: 1,
      };
    },
    showDialog(row) {
      const vm = this;
      vm.dialog.title = "修改权限";
      vm.dialog.visible = true;
      vm.dialog.update = true;
      vm.permission = {
        id: row.id,
        name: row.name,
        description: row.description,
        statusID: row.statusID,
      };
    },
    onDelete(row) {
      const vm = this;
      vm.$confirm("是否删除?", "提示信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((action) => {
        if (action === "confirm") {
          deletePermission({ ids: row.id })
            .then((res) => {
              vm.$message({
                message: res.message,
                type: "success",
              });
              Promise.resolve();
              vm.getDatas(vm.pageNo, vm.pageSize);
            })
            .catch((err) => {
              Promise.resolve();
            });
        }
      });
    },
    cancelClick() {
      const vm = this;
      vm.dialog.visible = false;
    },
    confirmClick() {
      const vm = this;
      if (!vm.dialog.update) {
        addPermission(vm.permission).then((res) => {
          vm.dialog.visible = false;
          vm.$message({
            message: res.message,
            type: "success",
          });
          Promise.resolve();
          vm.getDatas(vm.pageNo, vm.pageSize);
        });
      } else {
        updatePermission(vm.permission).then((res) => {
          vm.dialog.visible = false;
          vm.$message({
            message: res.message,
            type: "success",
          });
          Promise.resolve();
          vm.getDatas(vm.pageNo, vm.pageSize);
        });
      }
    },
    handleSizeChange(val) {
      const vm = this;
      vm.pageSize = val;
    },
    handlePageChange(val) {
      const vm = this;
      vm.pageNo = val;
      vm.getDatas(vm.pageNo, vm.pageSize);
    },
  },
};
</script>

<style lang="scss" scoped>
.permission {
  width: 100%;
  padding: 30px;
  .header {
    margin-bottom: 20px;
  }
  .content {
    margin-bottom: 20px;
  }
  .pagination {
    margin-top: 20px;
  }
}
</style>